<template>
	<view class='group-member-container'>
<!-- 		<movable-area  class="t-conversation-item-container" >
			<movable-view class="t-conversation-item" direction="horizontal"
				@click="goUser(leader.UserId)" damping="100" :x="xScale">
				<view class="avatar-box">
					<image class="t-conversation-item-avatar" :src="leader.UserAvatar"></image>
				</view>
				<view class="t-conversation-item-content">
					<label class="tui-conversation-item-name">{{}}</label>
					<view style="text-align: right" right class="u-m-r-30 leader">{{ $t('chat.leader') }}</view>
				</view>
				
			</movable-view>
			
			</movable-area> -->
			
		<view  v-for="(value,key) in groupMemberList" :key="key" >
		<view class="u-m-l-24 user-title">{{ key }}</view>
			<view  v-for="(item,index) in value" :key="index">
			<movable-area   class="t-conversation-item-container" >								
				<movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove"
					@click="goUser(item.UserId)" damping="100" :x="xScale">
					<view  class="avatar-box">
						<image class="t-conversation-item-avatar"
							:src="item.UserAvatar == '' ? '../../static/images/avatar.jpg': item.UserAvatar">
						</image>
					</view>
					<view  class="t-conversation-item-content">
						<label class="tui-conversation-item-name">{{item.UserName}}</label>
					</view>
					<view v-if="item.IsLord == 1" style="white-space : nowrap" class="u-m-r-30 leader">{{ $t('chat.leader') }}</view>					
				</movable-view>				
			</movable-area> 
			</view>
</view>

	
			
<!-- 	 <view v-for="(value,key) in groupMemberList">
		<movable-area class="t-conversation-item-container">
			<movable-view v-for="(item, index) in value" :key="index"
			class="t-conversation-item" direction="horizontal"
				@click="goUser(item.UserId)" damping="100" :x="xScale">
				<view class="avatar-box">
					<image class="t-conversation-item-avatar" :src="item.UserAvatar"></image>
				</view>
				<view class="t-conversation-item-content">
					<label class="tui-conversation-item-name">{{item.UserName}}</label>
				</view>
				
			</movable-view>
		</movable-area>
		</view> 
		<view  v-for="(item, index) in groupMemberList">
			<view class="u-m-l-24 user-title">{{ index }}</view>
		<movable-area class="t-conversation-item-container">
			<movable-view v-for="(item, index) in value" :key="index"
			class="t-conversation-item" direction="horizontal">
			<u-avatar @click="goUser(item.UserId)" :style="avatarStyle"
				:show-level="item.IsLord == 1 ? true : false"
				v-if="item.UserAvatar"
				:src="item.UserAvatar" mode="square"></u-avatar>
				<view class="t-conversation-item" direction="horizontal"
					@click="goUser(item.UserId)" damping="100" :x="xScale">
					
			<view class="t-conversation-item-content">
				<label class="tui-conversation-item-name">{{item.UserName}}</label>
				</view>
			</view>
			<view v-if="item.IsLord == 1" style="white-space : nowrap" class="u-m-r-30 leader">{{ $t('chat.leader') }}</view>
		
		</movable-view>
	</movable-area>
	</view> -->
	</view>
</template>

<script>
 import pinyin from 'js-pinyin'
	export default {
		data() {
			return {
				groupMemberList: {},
				groupId: 0,
				userId: 0,
				groupInfo: {},
				leader: {},
				xScale: 0,
			}
		},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		onLoad(option) {
			
			this.groupId = option.groupId || '';
			this.getGroupMemberList()
			
		},
		onShow() {
		},
		methods: {
			getGroupMemberList() {
				let that=this
				this.$http.get('/mgr/user/group/member/list/data', {
					gid: this.groupId,
				}).then(res => {
					that.groupInfo = res.groupInfo;
					// console.log(JSON.stringify(res.groupMemberList)+'++++++++++++++++++++++++++++++++++++++++++++++++++')
					that.groupMemberList = that.sortMember(res.groupMemberList)
					console.log(JSON.stringify(that.groupMemberList)+'++++++++++++++++++++++++++++++++++++++++++++++++++')
					// console.log(this.groupMemberList+'+++++++++++++++++++++++++++++++++++++++++++++++++++++++')
					uni.setNavigationBarTitle({
						title: that.$t('chat.group_member') + '(' + res.groupMemberList.length + ')'
					})
				});
			},
		 sortMember(arr){
			
				var letters = '_ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
				var resList = {} //排序分类后的对象
				let pattern1 = new RegExp("[\u4E00-\u9FA5]+"); //中文
				let pattern2 = new RegExp("[A-Za-z]+"); //英文
				var listKey =[]
				resList["_"] = []
				letters.map((item, i) => {
					
					listKey =[]
					arr.forEach(item1 => {
						//验证改昵称是以中文、英文还是其他字符开头
						let firstStr = item1.UserName.substring(0, 1)
						
						let str = '' //定义首字母
			
						if (pattern1.test(firstStr)) {
							//如果以中文开头，则转换为拼音,并获取首字母
							str = pinyin.getFullChars(firstStr).substring(0, 1)
						} else if (pattern2.test(firstStr)) {
							//如果以英文字母开头
							str = firstStr.toUpperCase()
						}
						if (str == item && item1.IsLord ==0) {							
							listKey.push(item1)
							console.log(JSON.stringify(listKey))
						}else if(item1.IsLord ==1 && resList["_"].length == 0){
							var k = []
							k.push(item1) 
							resList["_"] =k
						}
					})
					if(listKey.length !=0 ){
						resList[item] = listKey
						// resList[item].push(listKey)
					}
					
				})
				//其他字符开头的成员					
				arr.forEach(item1 => {
					//验证改昵称是以中文、英文还是其他字符开头
					let firstStr = item1.UserName.substring(0, 1)
					let str = '' //定义首字母
			
					if (!pattern2.test(firstStr) && !pattern1.test(firstStr)) {
						//如果以中文开头，则转换为拼音,并获取首字母
			
						resList['#'] = []
						resList['#'].push(item1)
					}
				})
				console.log("1111", JSON.stringify(resList))
				return resList
			},
			
			
			// 用户个人主页
			goUser(uid) {
				if (uid > 1) {
					uni.navigateTo({
						url: '/pages/user/index?uid=' + uid
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.group-member-container {
		padding: 20rpx 0;
	}
	.title {
		color: #767676;
		padding: 10rpx 24rpx;
	}
	.leader {
	writing-mode: horizontal-tb;
	   color: #767676;	
	}
	.t-conversation-item-container {
	  width: 100vw;
	  height: 114rpx;
	  background-color: #FFFFFF;
	}
	
	.t-conversation-item {
	  width: 100vw;
	  height: 114rpx;
	  display: flex;
	  left: 0;
	  align-items: center;
	  justify-content: flex-start;
	  box-sizing: border-box;
	   background-color: #FFFFFF;
	  /*  border-bottom: 2rpx solid #EEF0F3; */
	}
	
	.avatar-box {
	  position: relative;
	  display: inline-flex;
	}
	
	.t-conversation-item-avatar {
	  position: relative;
	  width: 72rpx;
	  height: 72rpx;
	  border-radius: 14rpx;
	  /*padding-left: 40rpx;*/
	  /*padding-right: 24rpx;*/
	  /*padding-bottom: 28rpx;*/
	  /*padding-top: 28rpx;*/
	  margin: 0 14rpx 0 24rpx;
	  overflow: auto;
	}
	
	.t-conversation-item-content {
	  flex: 1;
	  height: 114rpx;
	  line-height: 114rpx;
	  padding-left: 10rpx;
	  border-bottom: 2rpx solid #EEF0F3;
	  margin-left: 16rpx;
	}
	
	.t-conversation-item-info {
	  line-height: 34rpx;
	  font-size: 24rpx;
	  color: #999999;
	  margin-right: 30rpx;
	}
	
	.t-error {
	  background-color: #fb5250;
	  color: #fff;
	}
	
	.t-conversation-delete {
	  width: 144rpx;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #E85454;
	  color: #FFFFFF;
	  line-height: 44rpx;
	  font-size: 32rpx;
	}
	
	.tui-conversation-item-name {
	  /* line-height: 53rpx; */
	  font-size: 32rpx;
	  font-family: MicrosoftYaHei;
	  font-weight: 400;
	  color: #131313;
	}
	
</style>